<template>
  <div id="reg">
  <img src="../../assets/icon/bgLogin.png" alt="" class="bgLogin">
  <div class="title">欢迎注册</div>
  <mt-field label="用户名" placeholder="请输入用户名" v-model='username' :state="usernameStatus" @blur.native.capture="checkStatus('username')"></mt-field>
  <mt-field label="真实姓名" placeholder="请输入真实姓名" v-model='trueName' ></mt-field>
  <mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model='inputTel' :state="phoneStatus" @blur.native.capture="checkStatus('phone')"></mt-field>
  <mt-field label="邮箱" placeholder="请输入邮箱" type="email" v-model='email'></mt-field>
  <mt-field label="身份证号" placeholder="请输入身份号" v-model='idcardnumber'></mt-field>
  <mt-field label="登录密码" placeholder="请输入密码" type="password" v-model='password'></mt-field>
  <mt-field label="确认登录密码" placeholder="请再次输入密码" type="password" v-model='password2'></mt-field>
  <mt-field label="验证码"  placeholder="请输入验证码" v-model='code'>
    <mt-button v-show="show" @click='getCode()'>获取验证码</mt-button>
    <mt-button disabled  v-show="!show">{{count}} s</mt-button>
  </mt-field>
  <mt-button class="regBtn" @click='regBtn()' size="large">立即注册</mt-button>
  </div>
</template>

<script>
  import {register_page,check_phone_number,get_register_code,check_username,register,get_register_result} from '@/api/';
  export default {
    data(){
      return{
        timer: null,
        show: true,//倒计时显示开关
        count: '',
        phoneStatus:'',//手机号状态-是否可用
        usernameStatus:'',//用户名状态-是否可用
        tel:'',//推荐人的手机号
        proxy_id:'',//	代理id
        gid:'',//	代理分组
        inputTel:"",//手机号
        username:'',//用户名
        email:'',//邮箱
        idcardnumber:'',//身份证号
        password:'',//密码
        password2:'',//确认密码
        code:'',//验证码
        telid:'',//手机识别码
        trueName:'',//真实姓名
      }
    },
    methods:{
      getCode(){
        var telreg=/^[1][3,4,5,7,8][0-9]{9}$/;//手机号正则
        const TIME_COUNT = 90;
        if(!telreg.test(this.inputTel)){
          this.$messagebox.alert('请输入正确的手机号！')
        }else if (!this.timer){
          get_register_code({tel:this.inputTel}).then( res=>{
            console.log(res)
            if(res.status == 0){
              this.$messagebox.alert(res.msg)
              return false;
            }else{
              this.$messagebox.alert(res.msg)
              this.count = TIME_COUNT;
              this.show = false;
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--;
                } else {
                  this.show = true;
                  clearInterval(this.timer);
                  this.timer = null;
                }
              }, 1000)
            }

          })
        }
      },
      regBtn(){
        var mailBox = /^\w+@[a-z0-9]+\.[a-z]+$/i;//邮箱正则
        var testid = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;//身份证号正则
        if(!mailBox.test(this.email)){
          this.$messagebox.alert('邮箱格式不正确！')
        }else if(!testid.test(this.idcardnumber)){
          this.$messagebox.alert('身份证号不正确！')
        }else{
          register({proxy_id:this.proxy_id,gid:this.gid,telid:this.telid,up_tel:this.tel,idcardnumber:this.idcardnumber,email:this.email,password2:this.password2,password:this.password,username:this.trueName,tel:this.inputTel,code:this.code,cnames:this.username}).then(res =>{
            console.log(res.status)
            if(res.status == 1){
              localStorage.setItem('tel', JSON.stringify(this.inputTel));
              this.$messagebox.alert('注册成功！').then( action =>{
                if(action == 'confirm'){
                   this.$router.push('/downLoad');
                }
              })
            }else{
              this.$messagebox.alert(res.msg)
            }
          })
        }


      },
      checkStatus(types){//校验状态
        if(types == 'phone'){
          check_phone_number({proxy_id:this.proxy_id,tel:this.inputTel}).then(res =>{
            // console.log(res)
            if(res.status == 0){
              this.phoneStatus="error";
            }else if(res.status == 1){
              this.phoneStatus="success";
              this.telid = res.data.uniqueCode;
            }

          })
        }else if(types == 'username'){
          check_username({cnames:this.username}).then(res =>{
            console.log(res)
            if(res.status == 0){
              this.usernameStatus="error";
            }else if(res.status == 1){
              this.usernameStatus="success";
            }
          })
        }

      },
    },
    mounted() {
      this.tel = this.$route.query.tel;
      this.proxy_id = this.$route.query.proxy_id;
      this.gid = this.$route.query.gid;
    }
  }
</script>

<style scoped>
  #reg{display: flex;flex-direction:column;justify-content: center;}
  #reg .bgLogin {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 1;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    z-index: -1;
  }
  .mint-field-other .mint-button{padding: 0 2px;}
  #reg {
    z-index: 1;
    display: flex;
    flex-direction: column;
    margin-top: 20%;
    padding: 0 1em;
  }
.mint-button{font-size: 14px;}
  #reg .title {
    font-size: 2em;
    z-index: 2;
    color: #000000;
  }

  #reg .regBtn {
    margin-top: 1em;
    margin-bottom: 1em;
  }

  .otherLogin {
    color: #fff;
  }
 /deep/ .mint-field-core {font-size: 14px;}
</style>
